$text-color: #333 !default;
$bold-color: #000 !default;
$light-color: #888 !default;

$base-font: "Helvetica Neue", Hevetica, Arial, sans-serif !default;
$system-font: Monaco, "Lucida Console", monospace !default;

$line-height: 1.4;

// Mix with "body" element to set basic font attributes
@mixin body-typography {
  color: $text-color;
  font-family: $base-font;
  font-size: 105%;
  line-height: $line-height;
}

// Mix with content element to get styles for standard elements
@mixin basic-typography {
  strong {
    font-weight: bold;
    color: $bold-color;
  }
  
  em {
    font-style: italic;
  }
  
  h1, h2, h3, h4, h4, h6 {
    font-weight: normal;
    color: $bold-color;
  }
  
  h1 {
    font-size: 200%;
    font-weight: bold;
    margin: 1em 0;
    line-height: $line-height * 0.8;
  }
  
  h2 {
    font-size: 170%;
    font-style: italic;
    margin: 1em 0;
  }
  
  h3 {
    font-weight: bold;
    font-size: 140%;
    margin: 1.25em 0 0.5em;
  }
  
  h4 {
    font-weight: bold;
    font-size: 130%;
    margin: 0.5em 0 -0.5em;
  }
  
  p, ul, ol, dl, table {
    margin: 1em 0;
  }
  
  ul, ol {
    padding-left: 2.25em;
    ul, ol { margin: 0; }
  }
  ul { list-style: disc; }
  ol { list-style: decimal; }
  
  dt { margin-top: 1em; }
  dd { margin-top: 0.25em; margin-left: 1em; }
  
  pre {
    font-family: $system-font;
    font-size: 90%;
    color: invert($text-color);
    background: $text-color image-url('noise.png');
    padding: 1em;
    margin: 1.5em 0;
    
    @include border-radius(8px);
  }
  
  code, dfn, kbd, samp, tt {
    font-family: $system-font;
    font-size: 90%;
    background: #e5e5e5 image-url('noise.png');
    padding: 2px;
    @include border-radius(3px);
  }
}